<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.w3.org/1999/xhtml" layout:decorator="/layouts/default">
<th:block layout:fragment="title">
    在线状态图
</th:block>
<!-- head -->
<th:block layout:fragment="head">
    <!--页面自定义样式-->

    <style>

    </style>
</th:block>
<!-- content -->
<th:block layout:fragment="content">
    <div id="myDiagramDiv" style="border: solid 1px white; width: 100%; height: 400px"></div>
</th:block>

<!-- js -->
<th:block layout:fragment="js">

    <script type="text/javascript" th:src="@{/js/plugins/gojs/go.js}"></script>

    <!--页面js-->
    <script>
        $UU.init({
            data: {
                loading:false,
                myDiagram:null,
                model:{ "nodeKeyProperty": "id",
                    "nodeDataArray": [
                    ],
                    "linkDataArray": [
                    ]
                },
            },
            created: function () {

            },
            mounted: function () {
                this.init();
            },
            methods: {
                init: function () {
                    // if (window.goSamples) goSamples();  // init for these samples -- you don't need to call this
                    var $ = go.GraphObject.make;  // for conciseness in defining templates

                    let myDiagram =
                        $(go.Diagram, "myDiagramDiv",  // must name or refer to the DIV HTML element
                            {
                                // start everything in the middle of the viewport
                                initialContentAlignment: go.Spot.Center,
                                // have mouse wheel events zoom in and out instead of scroll up and down
                                "toolManager.mouseWheelBehavior": go.ToolManager.WheelZoom,
                                // support double-click in background creating a new node
                                "clickCreatingTool.archetypeNodeData": {text: "new node"},
                                // enable undo & redo
                                "undoManager.isEnabled": true
                            });

                    // when the document is modified, add a "*" to the title and enable the "Save" button
                    myDiagram.addDiagramListener("Modified", function (e) {
                        var button = document.getElementById("SaveButton");
                        if (button) button.disabled = !myDiagram.isModified;
                        var idx = document.title.indexOf("*");
                        if (myDiagram.isModified) {
                            if (idx < 0) document.title += "*";
                        } else {
                            if (idx >= 0) document.title = document.title.substr(0, idx);
                        }
                    });

                    // define the Node template
                    myDiagram.nodeTemplate =
                        $(go.Node, "Auto",
                            new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
                            // define the node's outer shape, which will surround the TextBlock
                            $(go.Shape, "RoundedRectangle",
                                {
                                    parameter1: 20,  // the corner has a large radius
                                    fill: $(go.Brush, "Linear", {0: "#426ab3", 1: "#426ab3"}),
                                    stroke: null,
                                    portId: "",  // this Shape is the Node's port, not the whole Node
                                    fromLinkable: true, fromLinkableSelfNode: true, fromLinkableDuplicates: true,
                                    toLinkable: true, toLinkableSelfNode: true, toLinkableDuplicates: true,
                                    cursor: "pointer"
                                }),
                            $(go.TextBlock,
                                {
                                    font: "bold 11pt helvetica, bold arial, sans-serif",
                                    editable: true  // editing the text automatically updates the model data
                                },
                                new go.Binding("text").makeTwoWay())
                        );

                    // unlike the normal selection Adornment, this one includes a Button  选中节点时效果
                    myDiagram.nodeTemplate.selectionAdornmentTemplate =
                        $(go.Adornment, "Spot",
                            $(go.Panel, "Auto",
                                $(go.Shape, {fill: null, stroke: "red", strokeWidth: 2}),
                                $(go.Placeholder)  // a Placeholder sizes itself to the selected Node
                            ),
                            // the button to create a "next" node, at the top-right corner
                            $("Button",
                                {
                                    alignment: go.Spot.TopRight,
                                    click: addNodeAndLink  // this function is defined below
                                },
                                $(go.Shape, "PlusLine", {width: 6, height: 6})
                            ) // end button
                        ); // end Adornment

                    // clicking the button inserts a new node to the right of the selected node,
                    // and adds a link to that new node
                    function addNodeAndLink(e, obj) {
                        var adornment = obj.part;
                        var diagram = e.diagram;
                        diagram.startTransaction("Add State");

                        // get the node data for which the user clicked the button
                        var fromNode = adornment.adornedPart;
                        var fromData = fromNode.data;
                        // create a new "State" data object, positioned off to the right of the adorned Node
                        var toData = {text: "new"};
                        var p = fromNode.location.copy();
                        p.x += 200;
                        toData.loc = go.Point.stringify(p);  // the "loc" property is a string, not a Point object
                        // add the new node data to the model
                        var model = diagram.model;
                        model.addNodeData(toData);

                        // create a link data from the old node data to the new node data  添加连线
                        var linkdata = {
                            from: model.getKeyForNodeData(fromData),  // or just: fromData.id
                            to: model.getKeyForNodeData(toData),
                            text: "运输"
                        };
                        // and add the link data to the model
                        model.addLinkData(linkdata);

                        // select the new Node
                        var newnode = diagram.findNodeForData(toData);
                        diagram.select(newnode);

                        diagram.commitTransaction("Add State");

                        // if the new node is off-screen, scroll the diagram to show the new node
                        diagram.scrollToRect(newnode.actualBounds);
                    }

                    // replace the default Link template in the linkTemplateMap
                    myDiagram.linkTemplate =
                        $(go.Link,  // the whole link panel
                            {
                                curve: go.Link.Bezier, adjusting: go.Link.Stretch,
                                reshapable: true, relinkableFrom: true, relinkableTo: true,
                                toShortLength: 3
                            },
                            new go.Binding("points").makeTwoWay(),
                            new go.Binding("curviness"),
                            $(go.Shape,  // the link shape
                                {strokeWidth: 1.5}),
                            $(go.Shape,  // the arrowhead
                                {toArrow: "standard", stroke: null}),
                            $(go.Panel, "Auto",
                                $(go.Shape,  // the label background, which becomes transparent around the edges
                                    {
                                        fill: $(go.Brush, "Radial",
                                            {0: "rgb(240, 240, 240)", 0.3: "rgb(240, 240, 240)", 1: "rgba(240, 240, 240, 0)"}),
                                        stroke: null
                                    }),
                                $(go.TextBlock, "transition",  // the label text
                                    {
                                        textAlign: "center",
                                        font: "9pt helvetica, arial, sans-serif",
                                        margin: 4,
                                        editable: true  // enable in-place editing
                                    },
                                    // editing the text automatically updates the model data
                                    new go.Binding("text").makeTwoWay())
                            )
                        );
                    myDiagram.model = go.Model.fromJson(this.model);
                    this.myDiagram = myDiagram;
                },

                // Show the diagram's model in JSON format
                save: function () {
                    this.model = this.myDiagram.model.toJson();
                },
            }
        })
        ;
    </script>

</th:block>
</html>
